<template>
  <div id="roomTypeCheckIn"></div>
</template>

<script>
import { Chart } from "@antv/g2";

export default {
  name: "teacherView",
  data() {
    return {
      mydata: [
        {
          Class: "2010-01",
          number: 1998,
        },
        {
          Class: "2010-02",
          number: 1850,
        },
        {
          Class: "2010-03",
          number: 1720,
        },
        {
          Class: "2010-04",
          number: 1818,
        },
        {
          Class: "2010-05",
          number: 1920,
        },
        {
          Class: "2010-06",
          number: 1802,
        },
        {
          Class: "2010-07",
          number: 1945,
        },
        {
          Class: "2010-08",
          number: 1856,
        },
        {
          Class: "2010-09",
          number: 2107,
        },
        {
          Class: "2010-10",
          number: 2140,
        },
        {
          Class: "2010-11",
          number: 2311,
        },
        {
          Class: "2010-12",
          number: 1972,
        },
        {
          Class: "2011-01",
          number: 1760,
        },
        {
          Class: "2011-02",
          number: 1824,
        },
        {
          Class: "2011-03",
          number: 1801,
        },
        {
          Class: "2011-04",
          number: 2001,
        },
        {
          Class: "2011-05",
          number: 1640,
        },
        {
          Class: "2011-06",
          number: 1502,
        },
        {
          Class: "2011-07",
          number: 1621,
        },
        {
          Class: "2011-08",
          number: 1480,
        },
        {
          Class: "2011-09",
          number: 1549,
        },
        {
          Class: "2011-10",
          number: 1390,
        },
        {
          Class: "2011-11",
          number: 1325,
        },
        {
          Class: "2011-12",
          number: 1250,
        },
        {
          Class: "2012-01",
          number: 1394,
        },
        {
          Class: "2012-02",
          number: 1406,
        },
        {
          Class: "2012-03",
          number: 1578,
        },
        {
          Class: "2012-04",
          number: 1465,
        },
        {
          Class: "2012-05",
          number: 1689,
        },
        {
          Class: "2012-06",
          number: 1755,
        },
        {
          Class: "2012-07",
          number: 1495,
        },
        {
          Class: "2012-08",
          number: 1508,
        },
        {
          Class: "2012-09",
          number: 1433,
        },
        {
          Class: "2012-10",
          number: 1344,
        },
        {
          Class: "2012-11",
          number: 1201,
        },
        {
          Class: "2012-12",
          number: 1065,
        },
        {
          Class: "2013-01",
          number: 1255,
        },
        {
          Class: "2013-02",
          number: 1429,
        },
        {
          Class: "2013-03",
          number: 1398,
        },
        {
          Class: "2013-04",
          number: 1678,
        },
        {
          Class: "2013-05",
          number: 1524,
        },
        {
          Class: "2013-06",
          number: 1688,
        },
        {
          Class: "2013-07",
          number: 1500,
        },
        {
          Class: "2013-08",
          number: 1670,
        },
        {
          Class: "2013-09",
          number: 1734,
        },
        {
          Class: "2013-10",
          number: 1699,
        },
        {
          Class: "2013-11",
          number: 1508,
        },
        {
          Class: "2013-12",
          number: 1680,
        },
        {
          Class: "2014-01",
          number: 1750,
        },
        {
          Class: "2014-02",
          number: 1602,
        },
        {
          Class: "2014-03",
          number: 1834,
        },
        {
          Class: "2014-04",
          number: 1722,
        },
        {
          Class: "2014-05",
          number: 1430,
        },
        {
          Class: "2014-06",
          number: 1280,
        },
        {
          Class: "2014-07",
          number: 1367,
        },
        {
          Class: "2014-08",
          number: 1155,
        },
        {
          Class: "2014-09",
          number: 1289,
        },
        {
          Class: "2014-10",
          number: 1104,
        },
        {
          Class: "2014-11",
          number: 1246,
        },
        {
          Class: "2014-12",
          number: 1098,
        },
        {
          Class: "2015-01",
          number: 1189,
        },
        {
          Class: "2015-02",
          number: 1276,
        },
        {
          Class: "2015-03",
          number: 1033,
        },
        {
          Class: "2015-04",
          number: 956,
        },
        {
          Class: "2015-05",
          number: 845,
        },
        {
          Class: "2015-06",
          number: 1089,
        },
        {
          Class: "2015-07",
          number: 944,
        },
        {
          Class: "2015-08",
          number: 1043,
        },
        {
          Class: "2015-09",
          number: 893,
        },
        {
          Class: "2015-10",
          number: 840,
        },
        {
          Class: "2015-11",
          number: 934,
        },
        {
          Class: "2015-12",
          number: 810,
        },
        {
          Class: "2016-01",
          number: 782,
        },
        {
          Class: "2016-02",
          number: 1089,
        },
        {
          Class: "2016-03",
          number: 745,
        },
        {
          Class: "2016-04",
          number: 680,
        },
        {
          Class: "2016-05",
          number: 802,
        },
        {
          Class: "2016-06",
          number: 697,
        },
        {
          Class: "2016-07",
          number: 583,
        },
        {
          Class: "2016-08",
          number: 456,
        },
        {
          Class: "2016-09",
          number: 524,
        },
        {
          Class: "2016-10",
          number: 398,
        },
        {
          Class: "2016-11",
          number: 278,
        },
        {
          Class: "2016-12",
          number: 195,
        },
        {
          Class: "2017-01",
          number: 145,
        },
        {
          Class: "2017-02",
          number: 207,
        },
      ],
    };
  },

  methods: {
    initComponent() {
      const chart = new Chart({
        container: "roomTypeCheckIn",
        autoFit: true,
        height: 500,
      });

      chart.data(this.mydata);
      chart.scale("Class", {
        range: [0, 1],
        tickCount: 10,
        type: "timeCat",
      });
      chart.scale("number", {
        nice: true,
      });
      chart.axis("number", {
        label: {
          formatter: (text) => {
            return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
          },
        },
      });
      chart.tooltip({
        showCrosshairs: true,
      });

      chart.annotation().dataMarker({
        position: ["2014-01", 1750],
        top: true,
        text: {
          content: "因政策调整导致销量下滑",
          style: {
            fontSize: 13,
          },
        },
        line: {
          length: 30,
        },
      });

      chart.line().position("Class*number");
      chart.area().position("Class*number");
      chart.render();
    },
  },
  mounted() {
    this.initComponent();
  },
};
</script>
